<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,  user-scalable=no" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="apple-nobile-web-app-capable" content="yes" />

<meta name="keywords" content="标题说明" />
<meta name="description" content="标题说明" />
<title>应用市场</title>

<link type="text/css" rel="stylesheet" href="./css/common.css" />
<link type="text/css" rel="stylesheet" href="./css/market.css" />
<link type="text/css" rel="stylesheet" href="./css/fontCss/font-awesome.min.css" />

</head>

<body>

<div class="container">
	
	<div class="header clearfix">
		<div class="headerLogo fl"></div>

		<ul class="headerList fr">
			<li><a href="#">资源管理</a></li>
			<li><a href="#">平台管理</a></li>
			<li><a href="#">用户admin</a></li>
		</ul>
	</div><!-- end of header -->

	<div class="content clearfix">
		<div class="menus">
			<ul class="menusCont">
				<li>
					<a href="#" class="menusCont_a">
						<i class="fa fa-coffee"></i>概况
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cloud"></i>云主机
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">实例</a>
						<a href="#">主机快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-database"></i>云硬盘
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">卷</a>
						<a href="#">硬盘快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-sitemap"></i>云网络
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">内部网络</a>
						<a href="#">内部FIP</a>
						<a href="#">路由</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-shield"></i>防火墙
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">防火墙</a>
						<a href="#">防火墙策略</a>
						<a href="#">防火墙规则</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cog"></i>安全
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">密钥对</a>
						<a href="#">安全组</a>
						<a href="#">操作日志</a>
						<a href="#">通知列表</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>负载均衡
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">资源池</a>
						<a href="#">监控</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>自动伸缩
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>应用市场
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">环境</a>
						<a href="#">应用</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-bolt"></i>云监控
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
			</ul>
		</div><!--end of menus -->

		<div class="main">
			<div class="w100">
				<div class="mA_choose">
					<ul class="mA_chooseUp">
						<li class="clearfix">
							<p>应用分类：</p>
							<div class="mA_chooseSel">
							    <select>
							        <option>ALL</option>
							        <option>SQL</option>
							    </select>
							    <i class="fa fa-sort" aria-hidden="true"></i>
							</div>
							<div class="mA_search fr">
								<input type="text" value="请输入关键字……" onfocus="if(this.value == '请输入关键字……') this.value = ''" onblur="if(this.value =='') this.value = '请输入关键字……'" />
								<a href="#"><i class="fa fa-search fa-lg" aria-hidden="true"></i></a>
							</div>
						</li>
					</ul>
				</div>
				<ul class="mA_list clearfix">
					<li  class="clearfix">
						<div class="mA_listImg fl"><img src="./images/temp1.png"></div>
						<div class="mA_listDet fl">
							<h3>MySQL</h3>
							<p>MySql is a relational database management system (RDBMS), and ships with no GUI tools to administer MySQL databases or manage data contained within the databases.Provided By: Mirantis, IncTags: SQL; RDBMS; Database; MySql;<a href="#">MORE</a></p>
						</div>
						<div class="mA_listBtn fl">
							<span class="greenBtn"><a href="#"><i class="fa fa-plus" aria-hidden="true"></i>快速部署</a></span>
						</div>
					</li>
					<li  class="clearfix">
						<div class="mA_listImg fl"><img src="./images/temp2.png"></div>
						<div class="mA_listDet fl">
							<h3>MySQL</h3>
							<p>MySql is a relational<a href="#">MORE</a></p>
						</div>
						<div class="mA_listBtn fl">
							<span class="greenBtn"><a href="#"><i class="fa fa-plus" aria-hidden="true"></i>快速部署</a></span>
						</div>
					</li>
					<li  class="clearfix">
						<div class="mA_listImg fl"><img src="./images/temp1.png"></div>
						<div class="mA_listDet fl">
							<h3>MySQL</h3>
							<p>MySql is a relational database management system (RDBMS), and ships with no GUI tools to administer MySQL databases or manage data contained within the databases.Provided By: Mirantis, IncTags: SQL; RDBMS; Database; MySql;<a href="#">MORE</a></p>
						</div>
						<div class="mA_listBtn fl">
							<span class="greenBtn"><a href="#"><i class="fa fa-plus" aria-hidden="true"></i>快速部署</a></span>
						</div>
					</li>
				</ul>
			</div>	
		</div><!-- end of main -->
	</div><!-- end of content -->

</div><!-- end of container -->

<script type="text/javascript" src="./js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="./js/jq/jquery.goup.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript">
window.onload=function(){
	reSize();
}

$(window).resize(function(){
	reSize();		  				  
});

function reSize(){
	var window_W = $(window).width();
	var window_H = $(window).height();

	$('.menus').css('min-Height',window_H-55);
	$('.main').width(window_W-243).css('min-width','857px');
}

//左侧菜单
$('.menusCont li a.menusCont_a').on('click',function(){
    $(this)/*.addClass('menusCont_on')*/.next().slideToggle('fast');
});
$('.menusCont li a').on('click',function(){
    $('.menusCont li a').removeClass('menusCont_on');
    $(this).addClass('menusCont_on');
});
</script>

</body>
</html>